<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>智能检索统计系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <style>
        .layui-side {
            width: 14%;
        }

        .layui-side-scroll {
            width: 100%;
        }

        .layui-nav-tree {
            width: 98%;
        }

        .last-a {
            padding-left: 25% !important;
        }

        .layui-bg-black {
            background-color: #485484 !important;
        }

        .layui-nav {
            background-color: #485484;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #5775EF !important;
        }

        .layui-nav-itemed > .layui-nav-child {
            background-color: #485484 !important;
        }

        .second-a {
            padding-left: 17% !important;
            width: 75%;
        }

        .layui-nav-tree .layui-nav-bar {
            display: none;
            background-color: #f30a11 !important;
        }

        .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this {
            background-color: #485484;
        }

        #ul_jl_tabs li {
            padding: 0 10px;
        }

        #ul_jl_tabs li img {
            /*margin-top: 4px!important;*/
        }

        .zskml-li {
            padding: 20px;
        }

        .zskml {
            font-size: 22px;
            font-weight: bolder;
        }

        .layui-nav-tree .layui-this > a {
            background-color: #5775EF !important;
        }

        .layui-nav-tree .layui-this {
            background-color: #5775EF !important;
        }

        .column > div {
            /*padding-bottom: 11px;*/
        }

        .column ul li {
            height: 30px;
            padding: 6px 8px;
        }

        .column ul li {
            line-height: 30px;
        }

        .column ul {
            position: absolute;
            bottom: 8px;
        }

        .imgshow {
            width: 25px;
            height: 25px;
            margin-top: 10px;
            margin-right: 10px;
        }

        .tab_menu {
            width: 150px;
            line-height: 25px;
            background: #FFFFFF;
            position: absolute;
            box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 25%);
            font-size: 14px;
            text-align: center;
            padding: 0;
            z-index: 1000;
        }

        .tab_menu ul {
            width: 100%;
            line-height: 25px;
        }
    </style>
</head>

<body>
<!--头部-->
<header class="whitebg">
    <div class="clearfix">
        <a href="/main">
            <img src="${re.contextPath}/plugin/common/images/2@2x.png" class="logo fl" alt=""/>
        </a>
        <div class="mineData fr clearfix mt10">
            <#--            <img src="${re.contextPath}/plugin/common/images/29@2x.png" alt="" class="fl"/>-->
            <#if "${file}" !="${null}" && (file.xgtx) != "${null}">
                <img class="ml10" src="${file.xgtx}" alt="" id="mainimg7">
            <#else>
                <#if "${user}" !="${null}" && (user.personType) == "002">
                    <img class="layui-upload-img ml10" id="mainimg7" src="/plugin/common/images/zzlogo.jpg">
                <#else>
                    <img class="layui-upload-img ml10" id="mainimg7"
                         src="${re.contextPath}/plugin/common/images/29@2x.png">
                </#if>
            </#if>
            <nav class="fl ml10">
                <p class="fr18" style="margin-top: 17%;"><#assign currentUser = Session["currentPrincipal"]>
                    <#--<img src="${re.contextPath}/images/${currentUser.photo}" class="layui-nav-img">-->
                    ${currentUser.username}</p>
                <p class="gary" style=""><a href="${re.contextPath}/logout"><i class="fa fa-sign-out"
                                                                               aria-hidden="true"></i> 退出</a>
                </p>
            </nav>
        </div>
    </div>
    <div class="column bluebg white clearfix" style="padding: 0">
        <#--		<div class="ft20 fl"><a href="/search/index">智能检索统计系统</a></div>-->
        <div style="display: inline-block;width: 14%;padding-left: 23px;padding-bottom: 0;padding-top:9px;margin-bottom: -7px">
            <#--		<img src="${re.contextPath}/plugin/common/images/45@2x.png" alt="" class=" moduleIcon"
                         style="width: 30px;height: 30px;float: left">-->
            <span class="ft16" style="float: left">智能检索统计系统</span>
        </div>
        <div class="tab_list" style="display: inline-block;width: 86%;overflow: hidden;margin-top: 6px">
            <div id="lt-arrow" style="height: 35px"><img id="left" class="arrow"
                                                         src="${re.contextPath}/plugin/common/images/lt-arrow.png">
            </div>
            <ul id="ul_jl_tabs" class="ft14 clearfix fl ml50" style="margin-left: 0;left:43px;top: 10px"></ul>
            <div id="rt-arrow"><img id="right" class="arrow" src="${re.contextPath}/plugin/common/images/rt-arrow.png">
            </div>
        </div>
    </div>
    <div class="tab_menu" id="tab_menu">
        <ul>
            <li class="list closeother">关闭其他标签</li>
            <li class="list closeall">关闭所有标签</li>
        </ul>
    </div>
</header>
<!--容器-->
<div class="container clearfix">
    <!--占位-->
    <div class="headerHightAdd"></div>
    <!--左侧菜单栏-->

    <div class="layui-side layui-bg-black" style="top:132px;padding-top: 20px;z-index: 0">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <#list left as firstMenu>
                    <li class="layui-nav-item oneLevelLi">

                    <#if "${firstMenu.url}"=="">
                        <a class="first-a" href="javascript:;" menuid="${firstMenu.id}" onclick="showContent(this)">
                            <img src="${re.contextPath}/plugin/common/images/${firstMenu.icon}.png" alt=""
                                 class="fl icon imgshow"/>
                            ${firstMenu.name}
                        </a>
                    <#else >
                        <a class="first-a" href="javascript:;" url="${firstMenu.url}" menuid="${firstMenu.id}"
                           onclick="showContent(this)">
                            <img src="${re.contextPath}/plugin/common/images/${firstMenu.icon}.png" alt=""
                                 class="fl icon imgshow"/>
                            ${firstMenu.name}</a>
                    </#if>

                    <#if (firstMenu.children?? && firstMenu.children?size gt 0)>
                        <dl class="layui-nav-child">
                        <#list firstMenu.children as secondMenu>
                            <li class="layui-nav-item twoLevelLi">
                                <#if "${secondMenu.url}"=="">
                                    <a class="second-a" href="javascript:;" menuid="${secondMenu.id}"
                                       onclick="showContent(this)">${secondMenu.name}</a>
                                <#else >
                                    <a class="second-a" href="javascript:;" url="${secondMenu.url}"
                                       menuid="${secondMenu.id}" onclick="showContent(this)">${secondMenu.name}</a>
                                </#if>


                                <#if (secondMenu.children?? && secondMenu.children?size gt 0)>
                                    <dl class="layui-nav-child">
                                        <#list secondMenu.children as thirdMenu>
                                            <dd><a href="javascript:;" class="last-a" url="${thirdMenu.url}"
                                                   menuid="${thirdMenu.id}"
                                                   onclick="showContent(this)">${thirdMenu.name}</a></dd>
                                        </#list>
                                    </dl>
                                </#if>
                            </li>
                        </#list>
                        </dl>
                    </#if>
                    </li>
                </#list>
            </ul>
        </div>
    </div>


    <!--右侧内容-->
    <div id="ul_jl_tabs_content" class="Right fr fixRight" style="overflow-y: hidden;left: 14%;"></div>
</div>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/itkl.js"></script>
<script>
    document.oncontextmenu = function () {
        return false;
    }
    document.onmousedown = function (event) {
        // console.log(event)
        if (event.which === 1) {
            // console.log('yes')
            // $('.tab_menu').hide()
        }
    }
    $('.tab_menu').hide()
</script>
<script>
    var element;
    $(function () {

        window.parent._showtab('kiuygihjokgopklkyiuopk', '首页', '/search/BigScreen/index', function (iframe) {
            //点开首页的回调事件
            // if(iframe){
            // 	$(iframe)[0].contentWindow.flushPage();
            // }
        });
        $(".Right").css({
            left: $(".Left").width() + 'px',
            top: $(".headerHightAdd").height() + 'px',
            height: 'calc(100vh - ' + $(".headerHightAdd").height() + 'px)'
        });

        $(document).parents('iframe').attr('scrolling', 'no');

        $('.first-a').on('click', function () {
            $('.layui-this').removeClass('layui-this');
            $(this).addClass('layui-this');
        })

        $('.second-a').on('click', function () {
            $('.layui-this').removeClass('layui-this');
            $(this).addClass('layui-this');
        })


        var lt = $("#lt-arrow").offset().left;
        var ltw = $("#lt-arrow").width();
        var rt = $("#rt-arrow").offset().left;
        var distances = rt - (lt + ltw);
        $("#lt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ltul = _apst.offset().left
            var ult = lt + ltw - 2
            if (ulwidth > distances && ltul < ult) {
                _apst.css({left: (_apst.position().left + 40) + "px"});
            }
        })
        $("#rt-arrow").click(function () {
            var _apst = $("#ul_jl_tabs");
            var ulwidth = _apst.width();
            var ulleft = _apst.offset().left
            var widthadd = ulleft + ulwidth
            if (ulwidth > distances && widthadd > rt) {
                _apst.css({left: (_apst.position().left - 40) + "px"});
            }
        })


    })

    function showContent(e) {
        var url = $(e).attr('url');
        var menuName = $(e).html();
        var menuId = $(e).attr('menuid');
        // console.log(url);
        // console.log(menuName);
        // console.log(menuId);
        if (url) {
            parent._showtab(menuId, menuName, url, function (iframe) {
                //点开首页的回调事件
                // if(iframe){
                // 	$(iframe)[0].contentWindow.flushPage();
                // }
            });
        }
    }

    var tabid;

    $('#ul_jl_tabs').on("mousemove", 'li', function (event) {
        var that = $(this);
        if (event.offsetX > that.width() - 5 || event.offsetX < 5 || event.offsetY < 5 || event.offsetY > that.height() - 5) {
            $('.tab_menu').hide()
        }
    })

    $('#ul_jl_tabs').on("mousedown", 'li', function (event) {
        var that = $(this);
        tabid = that.attr('mid')
        // console.log(event);
        if (event.which === 3) {
            $('.tab_menu').css({
                'top': event.clientY + 'px',
                'left': event.clientX + 'px',
            })
            _showTabByMid(tabid)
            $('.tab_menu').show()
        } else {
            $('.tab_menu').hide()
        }
    })

    $('#tab_menu').on("click", "ul .closeother", function () {
        console.log('other');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            console.log(id)
            if (id != tabid) {
                _delTab(id)
            }
        }
        $('.tab_menu').hide()
    })

    $('#tab_menu').on("click", "ul .closeall", function () {
        console.log('all');
        var tablist = $('#ul_jl_tabs').find('li')
        for (var i = 0; i < tablist.length; i++) {
            var id = tablist[i].getAttribute('mid')
            _delTab(id)
        }
        $('.tab_menu').hide()
    })

</script>
</body>

</html>
